import { useState, useEffect, useRef } from "react";
import { message } from 'antd';
import { UpSquareOutlined, DownSquareOutlined } from '@ant-design/icons';
import CommonModal from '@/components/CommonModal';
import CommonTable from "@/components/CommonTable";
import CommonLoading from "@/components/CommonLoading";
import AddAreaCodeModal from "./AddAreaCodeModal";
import { getAreaListOp, deleteAreaCodeOp, sortAreaCodeOp } from '../service';

import styles from './index.module.less';

const UpdatePriorityModal = ({ visible, handleOk, handleCancel }) => {

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const [addModal, setVisible] = useState(false);

  const hasDelete = useRef(false);

  useEffect(()=>{
    if(visible){
      getAreaListFunc();
    }
  },[visible])

  //区域编码列表
  const getAreaListFunc = async (isUpdate) => {
    setLoading(true);
    const { data: newData, success } = await getAreaListOp();
    setLoading(false);
    if (success) {
      if(isUpdate){
       const arr = [...data];
       arr.push(newData[newData.length - 1]);
       setData(arr);
      }else{
        setData(newData);
      }
    }
  }

  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      width: 80,
      render:(t, r, i) => i + 1
    },
    {
      title: "区域编码",
      dataIndex: "name",
      key: "name",
      width: 200,
    },
    {
      title: "编码排序",
      dataIndex: "sort",
      key: "sort",
      width: 150,
      render:(t,r,index)=>{
        const notFirst = !!index,
              notLast = index != data.length - 1;
        return (<>
          <UpSquareOutlined  onClick={()=>notFirst && handleOperator('up', index)} style={{fontSize:'20px',color:notFirst ? '#0071F0' : '#ccc', cursor: notFirst ? 'pointer' : 'no-drop' }} />&nbsp;
          <DownSquareOutlined onClick={()=>notLast && handleOperator('down', index)} style={{fontSize:'20px', color: notLast ? '#0071F0' : '#ccc', cursor: notLast ? 'pointer' : 'no-drop'}} />
          </>)
      }
    },
    {
      title: "操作",
      dataIndex: "id",
      key: "id",
      width: 90,
      render:(t,r,index)=>(<span className="opera-span-common"><span onClick={()=>handleDelete(index)}>删除</span></span>)
    },
  ]

  const handleOperator = (type, index) => {
    const arr = [ ...data], temp = arr[index];
    if(type == 'down'){
      arr[index] = arr[index + 1];
      arr[index + 1] = temp;
    }else{
      arr[index] = arr[index - 1];
      arr[index - 1] = temp;
    }
    setData(arr);
  }

  //排序操作
  const onOk = async () => {
    setLoading(true);
    data.map((item,index)=>item.sort = index + 1)
    const { success } = await sortAreaCodeOp(data);
    setLoading(false);
    if(success){
      message.success('排序完成！')
      handleOk();
    }
  }

  //删除操作
  const handleDelete = async (index) => {
    setLoading(true);
    const { success } = await deleteAreaCodeOp({ id: data[index].id });
    setLoading(false);
    if(success){
      message.success('删除成功！');
      hasDelete.current = true;
      const arr = [...data];
      arr.splice(index, 1);
      setData(arr);
    }
  }

  //取消按钮
  const onCancel = () => {
    if(hasDelete.current){
      handleOk();
    }else{
      handleCancel();
    }
  }

  const CommonTableProps = {
    data, 
    columns,
    scroll:{y:426}
  }

  const addAreaCodeProps = {
    visible: addModal,
    handleOk(){
      setVisible(false);
      getAreaListFunc(true);
    },
    handleCancel(){
      setVisible(false);
    }
  }

  return (
    <CommonModal
       title="区域编码配置及排序"
       visible={visible}
       width="576px"
       maxHeight="600px"
       onOk={onOk}
       onCancel={onCancel}
    >
      <div className={styles.operatorBtn} onClick={()=>setVisible(true)}>添加区域编码</div>
      <CommonTable { ...CommonTableProps} />
      { addModal && <AddAreaCodeModal {...addAreaCodeProps} />}
      <CommonLoading loading={loading} />
    </CommonModal>
  )
}

export default UpdatePriorityModal;